<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<fieldset id="app">
			<legend><h2>app实例</h2></legend>
			<button type="button" @click="appcl">点击调用child2方法</button>
			<child1 ref="c1"></child1>
			<child2 ref="c2"></child2>
		</fieldset>
		
		<template id="child1">
			<fieldset>
				<legend><h2>child1</h2></legend>
				<button type="button" @click="c1cl">点击调用app方法</button>
			</fieldset>
		</template>
		<template id="child2">
			<fieldset>
				<legend><h2>child2</h2></legend>
			</fieldset>
		</template>
		
		<script type="text/javascript">
			let child1={
				template:'#child1',
				methods:{
					c1cl(){
						/* console.log(this.$parent) //获得当前组件的父组件
						console.log(this.$root) //获得当前组件的根组件 */
						console.log(this.$parent.rnd())
					}
				}
			}
			let child2={
				template:'#child2',
				data(){
					return {
						msg:"child2"
					}
				},
				methods:{
					c2cl(){
						return this.msg
					}
				}
			}
			new Vue({
				el:"#app",
				methods:{
					appcl(){
						console.log(this.$refs.c2.c2cl());
					},
					rnd(){
						return Math.floor(Math.random()*100)
					}
				},
				components:{
					child1,
					child2
				}
			})
		</script>
	</body>
</html>
